<template>
	<div class="container">
        <div class="y_top">
            <Input style='width:260px;' v-model="pageData.title" icon="ios-clock-outline" placeholder="请按标题搜索..." ></Input>
            <Button class="interval" type="primary" icon="ios-search" v-on:click="search">搜索</Button>
            <Button class="interval" type="warning" v-on:click="allremove">  批量删除  </Button>
        </div>
        <div class="y_bottom">
            <div class="y_table">
                <Table stripe border ref="selection" @on-selection-change="selectAll" :columns="columns7" :data="data6">
                </Table>
                <Spin size="large" fix v-if="loading"></Spin>
            </div>
            <!--修改框-->
            <!-- <Spin size="large" fix v-if="loading"></Spin> -->
            <Modal
                v-model="modal1"
                title="查看博客内容"
                @on-ok="ok"
                @on-cancel="cancel"
                >
                <Form ref="formValidate"  :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="标题" prop="title">
                        <Input v-model="formValidate.title" placeholder="标题"></Input>
                    </FormItem>
                    <FormItem label="作者" prop="author">
                        <Input v-model="formValidate.author" placeholder="请输入作者"></Input>
                    </FormItem>
                    <FormItem label="发布日期">
                        <Row>
                            <Col span="11">
                                <FormItem prop="date">
                                    <DatePicker type="date" placeholder="日期" v-model="formValidate.date"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
					<FormItem label="简述" prop="otherTitle"><!--用于显示详情页之前的值-->
                            <Input v-model="formValidate.otherTitle" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                    </FormItem>

					<!--类型暂时不处理-->
					<!-- <FormItem label="类型" prop="style">
                        <Cascader :data="baseData" v-model="formValidate.style" change-on-select style="width:200px"></Cascader>
                    </FormItem> -->
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                        <Button type="success" @click="handleShowComment('formValidate')" style="margin-left: 8px">查看评论</Button>
                    </FormItem>
                </Form>
                <div slot="footer"></div>
            </Modal>
            <!-- 批量删除确认模态框 -->
            <Modal v-model="isRemoveModal" width="360">
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="information-circled"></Icon>
                    <span>确认删除</span>
                </p>
                <div style="text-align:center">
                    <p>你确定删除这些数据么，删除后不可恢复哦~</p>
                </div>
                <div slot="footer">
                    <Button type="error" size="large" long :loading="okremove_loading" @click="okremove">删除</Button>
                </div>
            </Modal>
            <div class="container y_tableBottom">
                <div class="row" >
                    <div class="y-tableBtn col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <Button @click="handleSelectAll(true)">设置全选</Button>
                        <Button @click="handleSelectAll(false)">取消全选</Button>
                    </div>
                    <div class="y_tablePage col-lo-9 col-md-9 col-sm-9 col-xs-12">
                        <Page :total='pageData.total' size="small" placement="top" show-total show-elevator show-sizer @on-change="changePage" @on-page-size-change="changePageSize"></Page>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
	 import  BaseBlogs  from '../../assets/js/baseBlogs.js'

     export default {
        mixins: [BaseBlogs],
        watch: {
            query:'queryChange'
        },
        data () {
            return {
                module: 'content',//对basejs的传入模块
                modal1: false,//修改按钮
                isRemoveModal: false,
                okremove_loading: false,
			    //正则判断
                ruleValidate: {
                //     name: [
                //         { required: true, message: '姓名不能为空', trigger: 'blur' }
                //     ],
                //     password: [
                //         { required: true, message: '请填写密码', trigger: 'blur' },
                //         { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                //     ],
                //     city: [
                //         { required: true, message: '请选择城市', trigger: 'change' }
                //     ],
                //     date: [
                //         { required: true, type: 'date', message: '您的生日', trigger: 'change' }
                //     ]
                },
                columns7: [
                	{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
						title: '标题',
                        key: 'title',
                        width:240,
                        fixed: 'left',
                        ellipsis: true,
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'paper-airplane'
                                    }
                                }),
                                h('strong', params.row.title)
                            ]);
                        }
                    },
                    {
                        title: '作者',
                        key: 'author',
						width:100,
                        ellipsis: true,
                    },
                    {
                        title: '日期',
                        key: 'date',
						width:120,
                        ellipsis: true,
                        render:(h,params) => {//h：应该是对dom的一种添加;params是对行数据的设置
                            return this.$moment(params.row.date).format('YYYY-MM-DD');
                        }
                    },
                    {
                        title: '简介',
                        key: 'otherTitle',
						width:240,
                        ellipsis: true,
					},
					{
                        title: '类型',
                        key: 'style',
						width:120,
                        ellipsis: true,
                        render: (h,params) => {
                            return params.row.style[0][0].title;
                        },
					},
					{
                        title: '标签',
                        key: 'tips',
						width:160,
                        ellipsis: true,
                        render: (h,params) => {
                            var sTips = ' | ';
                            for(var i=0; i<params.row.tips.length;i++) {
                                sTips += params.row.tips[i]+' | ';
                            }
                            return sTips;
                        },
					},
					{
                        title: '内容',
                        key: 'textarea',
						width:320,
                        ellipsis: true,
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        fixed: 'right',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.row)
                                            //利用params取到这条数据的唯一id
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index,params.row._id)
                                        }
                                    }
                                }, '删除'),
                                // h('Button', {
                                //     props: {
                                //         type: 'error',
                                //         size: 'small'
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.showComment(params.index,params.row._id)
                                //         }
                                //     }
                                // }, '评论')
                            ]);
                        }
                    }
                ],
            }
        },
        props: ['query'],
        methods: {
            queryChange () {
                    this.data6 = this.query;
                if (this.query.length !=0 ) {//对分页的总数据的重构
                    this.pageData.total = this.query.length 
                } else {
                    this.pageData.total = 0;
                }
            },
            warning () {//警告提示框
                this.$Message.warning('使用批量删除才可以删除多项哦');
            },
            selectAll (selection) {//选中多项的时候触发
                this.select = selection;
            },
           
            show (data) {
				//获取数据的id唯一的数据
            	this.modal1 = true;
                this.formValidate.title = data.title;
                this.formValidate.otherTitle = data.otherTitle;
                this.formValidate.author = data.author;
                this.formValidate.date = data.date;
				this.formValidate.id = data._id;
				
				//剩下的是不变的数据
				this.formValidate.imgUrl = data.imgUrl;
				this.formValidate.style = data.style;
				this.formValidate.tips = data.tips;
				
            },
            ok () {
                this.$Message.info('点击了确定');
            },
            cancel () {
                this.$Message.info('点击了取消');
            },
            handleSelectAll (status) {//全选数据
                this.$refs.selection.selectAll(status);
            },
            handleSubmit (name) {//修改数据	,添加数据
                if (this.formValidate.id == null) {
                    console.log('这里进行提交新数据');
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            this.formDataCreate ();
                            this.$Message.success('提交成功!');


                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    })
                }else {
                    console.log('修改');
                    this.$refs[name].validate((valid) => {
                        if (valid) {
                            console.log(this.formValidate.id);
                            this.formDataUpdate (this.formValidate.id);
                            this.$Message.success('修改成功!');
                        } else {
                            this.$Message.error('表单验证失败!');
                        }
                    })
                }
                
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleShowComment (name){
                // this.$router.go('/blogscomment')
                //进行路由的跳转
                this.$router.push({path: 'blogscomment',query: {id: this.formValidate.id}})
                // this.$router.push({{path:'/blogscomment'},query:{id}})
            
            }
            
        }
    }
</script>

<style type="text/css" lang='scss' scoped>
	     .container{
		width: auto;
		.y_top{
            position: relative;
			padding-bottom:15px ;
			.interval{
				margin:0 12px;
			}
		}
		.y_bottom{
			.y_table{
                position: relative
			}
			.y_tableBottom{
				margin:18px 0;
				.y-tableBtn{
					text-align:center
				}
				.y_tablePage{
					line-height: 32px;
					text-align: center;
				}
			}
		}
	}           

</style>